Coffee School Game Lesson Three - Using Game States

Code Editor

// Creating environment variables var playerSize = 10; var sceneWidth = 300, sceneHeight = 150; var groundHeight = 10; var playAreaHeight = (sceneHeight - groundHeight); // Create the variables to track player movement var playerVel = 0; // Stores the player's velocity var g = 0.4; // The constant acceleration cause by "gravity" // Object width! var objectWidth = 2 * playerSize; // Obstacle Counter var obstacleCounter = 0; // Sets the background colour Crafty.background("#ADD8E6"); // Create the ground! Crafty.e("Solid, 2D, DOM, Color") .attr({x: 0, y: playAreaHeight, w: sceneWidth, h: groundHeight}) .color("#00ff00"); // Create our player's base entity Crafty.e("Collision, 2D, DOM, Color") // Specifying the components to add .attr({x: 30, y: 30, w: playerSize, h: playerSize}) // Specifying the dimensions and the point to draw from .checkHits("Solid") .color("#ff0000") // Specifying the colour of the rectangle .bind("EnterFrame", function() { // Binds the "EnterFrame" event to the entity if(this.y < 0) { playerVel = g; // Prevent the player from going above the game screen } else { playerVel += g; // Adds the "gravitational acceleration" to the player's velocity } this.y += playerVel; // Change the player entities y position based on the player velocity }) .bind("KeyDown", function(event) { // Binds the "KeyDown" event to our player entity if(event.key == Crafty.keys.SPACE){ // If the key is the spacebar then "flap" playerVel = -5; // Sets the player's speed and direction to go upwards } }) .bind("HitOn", function() { Crafty.pause(); }) .bind("EnterFrame", function() { Crafty("Obstacle").each(function() { if(this.x < -objectWidth) { this.destroy(); } else { this.x -= 3; } }); if(obstacleCounter > 100){ obstacleCounter = 0; newObstacle(); } obstacleCounter++; }); function newObstacle() { var randomHeight = Math.floor((Math.random() * (sceneHeight/2)) + (sceneHeight/3)); var bottomOfTopHalf = playAreaHeight - randomHeight; var topOfBottomHalf = bottomOfTopHalf + (4 * playerSize); // Create the top half of the pipe Crafty.e("Obstacle, 2D, DOM, Color, Solid") .attr({x: sceneWidth, y: 0, w: objectWidth, h: bottomOfTopHalf}) .color("#003319"); // Create the bottom half of the pipe Crafty.e("Obstacle, 2D, DOM, Color, Solid") .attr({x: sceneWidth, y: topOfBottomHalf, w: objectWidth, h: playAreaHeight - topOfBottomHalf}) .color("#003319"); }

Preview

Console Log:

Game Lesson Three - Using Game States

Part 1: Creating the Start Screen

Goal: Defining a start scene and a game scene

Most games don’t tend to throw you straight into the game once you load it up. What if the player isn’t ready to start playing immediately? This is pretty important for our game, because if you don’t start playing straight away you lose almost instantly!

To get rid of frustrating part of the game we’re going to create a simple start screen.

To create a game state in Crafty we can define a new Scene using Crafty.defineScene. We can give the scene a name and put code inside of the function it runs.

To make our start screen let’s create a scene and call it “Start”:

Crafty.defineScene("Start", function() {
    // Start screen stuff here :D
});

We want to place our “Start” scene between our game code and the variables at the top. This is because we want to wrap our game entity code inside of a “Game” scene so that we can switch to and from it.

Before we place anything in the “Start” scene let’s wrap our game code in a new “Game” scene so that we don’t have parts overlapping! The bits we want to have inside are shown in the example below:

Crafty.defineScene("Game", function() {
    // Our ground goes here

    // Our player goes here

});

// Obstacle function is here!

Now if you run the code like this you won’t see anything because Crafty hasn’t “entered a scene” - we’re not in any game state at the minute. Now, we need to start the game off by entering the “Start” scene. Crafty can only enter a scene that has been defined above the enterScene() function, which means to load the “Start” scene the enter scene code needs to be like this:

Crafty.defineScene("Start", function() {
    // Start scene
});

Crafty.enterScene("Start");

With these scenes in place we’re ready to fill our start screen!